<template>
  <div class="radar" id="radar-box">
    <img
      :src="PIC_URL + '/tlbypcWeb/qianfu/neiwaiguang.png'"
      alt=""
      class="outer"
    />
    <img
      :src="PIC_URL + '/tlbypcWeb/qianfu/leida_bg.png'"
      alt=""
      class="inner"
    />
    <img :src="PIC_URL + '/tlbypcWeb/qianfu/arrow.png'" alt="" class="arrow" />
    <svg id="box" width="605" height="605">
      <defs>
        <radialGradient id="g0">
          <stop offset="30%" stop-color="rgba(251,156,118, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(254,120,89, 0.6)"></stop>
        </radialGradient>
        <radialGradient id="g1">
          <stop offset="30%" stop-color="rgba(73,236,255, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(42,140,209, 0.6)"></stop>
        </radialGradient>
        <radialGradient id="g2">
          <stop offset="30%" stop-color="rgba(64,134,255, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(42,54,209, 0.6)"></stop>
        </radialGradient>
        <radialGradient id="g3">
          <stop offset="30%" stop-color="rgba(152,84,255, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(73,26,191, 0.6)"></stop>
        </radialGradient>
        <radialGradient id="g4">
          <stop offset="30%" stop-color="rgba(64,134,255, 0.6)"></stop>
          <stop offset="100%" stop-color="rgba(42,54,209, 0.6)"></stop>
        </radialGradient>
      </defs>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.radar {
  position: relative;
  width: 605px;
  height: 605px;
  overflow: hidden;
  .outer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    animation: anticlockwise 20s linear infinite;
  }
  .inner {
    position: absolute;
    left: 11px;
    top: 11px;
    z-index: 1;
  }
  .arrow {
    position: absolute;
    left: 299px;
    top: 42px;
    z-index: 3;
    animation: clockwise 4s linear infinite;
    transform-origin: 3px 261px;
  }
}
svg {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 4;
}
</style>
<style>
@keyframes anticlockwise {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-360deg);
  }
}

@keyframes clockwise {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.group {
  cursor: pointer;
  user-select: none;
}
.group:hover .bubble,
.group.tagActive .bubble {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2px;
}
</style>
